<template>
    <div class="game-news scroll-item">
        <!-- 游戏资讯轮播图  -->
        <div class="news-left">
            <div class="news-left-content">
                <div v-swiper:mySwiper="swiperOption" style="height: 100%">
                    <div class="swiper-wrapper news-left-item">
                        <div class="swiper-slide" v-for="(item, index) in Home.gameNews.newsPic">
                            <a :href="item.link ? item.link : 'javascript'" v-lazy:background-image="item.src"></a>
                            <p>{{item.text}}</p>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 游戏新闻  -->
        <div class="news-center">
            <div class="news-center-content">
                <div class="news-center-item" v-for="(item, index) in Home.gameNews.newsList" @mouseenter.prevent="mouseHover(index, 'newsList')" v-if="index < 7">
                    <h5 v-show="!item.activate" :class="`h5-${item.class}`">
                        <span :class="`span-${item.class}`">{{item.type}}</span>{{item.title}}</h5>
                    <div class="item-content" v-show="item.activate">
                        <h1>{{item.title}}</h1>
                        <i v-lazy:background-image="item.icon"></i>
                        <p>{{item.content}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 免费礼包  -->
        <div class="news-right">
            <div class="news-right-content">
                <h3 class="gift-title">
                    <i class="iconfont icon-libao"></i>免费礼包
                    <a href="#">更多
                        <i class="iconfont icon-gengduo"></i>
                    </a>
                </h3>
                <div class="gift-content">
                    <div class="gift-wrap" :class="{'gift-activate': item.activate}" v-for="(item, index) in Home.gameNews.newsGift" @mouseenter.prevent="mouseHover(index, 'newsGift')" v-if="index < 6">
                        <h4>
                            <span>《{{item.name}}》</span>{{item.title}}</h4>
                        <div class="gift-item" v-show="item.activate">
                            <i class="item-left" v-lazy:background-image="item.icon"></i>
                            <div class="item-right">
                                <span>剩余{{item.number}}</span>
                                <p>
                                    <i class="iconfont icon-shijian"></i>{{item.time}}截止</p>
                                <h5>{{item.code ? item.code : '领取礼包'}}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  computed: {
    Home: function() {
    //   return this.$store.state.Home
      return {
        gameNews: {
          newsPic: [
            {
              src:
                'http://cdn.img.miyugame.com/official_web_img/adsense/sources/1511341490.jpg',
              text: '梦幻仙语',
              alt: '1',
              link: 'javascript:;'
            },
            {
              src:
                'http://cdn.img.miyugame.com/official_web_img/adsense/sources/1510918272.jpg',
              text: '王者远征',
              alt: '2',
              link: 'javascript:;'
            },
            {
              src:
                'http://cdn.img.miyugame.com/official_web_img/adsense/sources/1509962558.jpg',
              text: '连击无双',
              alt: '3',
              link: 'javascript:;'
            },
            {
              src:
                'http://cdn.img.miyugame.com/official_web_img/adsense/sources/1505976023.jpg',
              text: '国战无双',
              alt: '4',
              link: 'javascript:;'
            }
          ],
          newsList: [
            {
              class: 'news',
              type: '新闻',
              title: '三天后《仙境传说》正式登录中 国大陆地区！',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: true
            },
            {
              class: 'test',
              type: '测评',
              title: '星趣米娱即将融资上市，大家尽请期待...',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1235/1511341255_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            },
            {
              class: 'strategy',
              type: '攻略',
              title: '平台致力于连接全球开发商和国内玩耍...',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            },
            {
              class: 'test',
              type: '开服',
              title: '《王者荣耀》微信238服今日1：00开服',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            },
            {
              class: 'strategy',
              type: '攻略',
              title: '极速流畅还可体验4K分辨率带给你的视觉盛宴',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            },
            {
              class: 'news',
              type: '新闻',
              title: '星趣米娱即将融资上市，大家尽请期待...',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            },
            {
              class: 'test',
              type: '测评',
              title: '电脑玩佡境传说,就选夜神模拟器,超强性能',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              content:
                '电脑玩佡境传说,就选夜神模拟器,超强性能,极速流畅还可体验4K分辨率带给你的视觉盛宴,享受纯正的冒险RPG体验,就用夜神安肆冒',
              activate: false
            }
          ],
          newsGift: [
            {
              name: '王者荣耀',
              title: '不知火舞碎片兑换英雄',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: true
            },
            {
              name: '部落冲突',
              title: '刘备更新皮肤出炉',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1210/1505974922_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            },
            {
              name: '龙之谷',
              title: '世界防御艾滋病版本礼包',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1224/1510910296_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            },
            {
              name: '梦幻仙语',
              title: '新区新手礼包',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            },
            {
              name: '国战无双',
              title: '国战无双兑换英雄',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1236/1511944983_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            },
            {
              name: '米娱游戏',
              title: '米娱游戏新年大礼包',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1247/1512635354_icon_0011_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            },
            {
              name: '王者荣耀',
              title: '不知火舞碎片兑换英雄',
              icon:
                'http://cdn.img.miyugame.com/official_web_img/images/1212/1507876799_85.png',
              number: '20',
              time: '2017-06-10 15:30',
              activate: false
            }
          ]
        }
      }
    }
  },
  data() {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  methods: {
    // 鼠标进入
    mouseHover(index, name) {
      this.$store.commit('mouseHover', { index: index, name: name })
    }
  }
}
</script>

<style lang="less">
// 改写swiper样式
.game-news {
  .swiper-pagination {
    bottom: 50px;
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: #fff;
      opacity: 1;
      border-radius: 6px;
      border: 2px solid #000;
      margin: 0 3px;
    }
    .swiper-pagination-bullet-active {
      width: 20px;
    }
  }
}
</style>

<style lang="less" scoped>
.game-news {
  height: 500px;
  margin-bottom: 40px;
  overflow: hidden;
  .news-left {
    float: left;
    width: 32%;
    height: 100%;
    overflow: hidden;
    margin-right: 2%;
    background-color: #fff;
  }
  .news-center {
    .news-left;
  }
  .news-right {
    float: left;
    width: 32%;
    height: 100%;
    background-color: #fff;
  }
  .news-left-content {
    height: 100%;
    position: relative;
    .news-left-item {
      position: relative;
      a {
        display: block;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
      }
      p {
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 40px;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-weight: 600;
      }
    }
    .swiper-pagination {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .news-center-content {
    height: 100%;
    padding: 25px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    .news-center-item {
      h5 {
        line-height: 22px;
        padding-left: 65px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        cursor: pointer;
        margin-bottom: 21px; // &:hover {
        //   text-decoration: underline;
        // }
      }
      span {
        width: 55px;
        line-height: 22px;
        height: 22px;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 14px;
        color: #fff;
        text-align: center;
        font-weight: 600;
      }
      .span-news {
        background: url('../../../assets/icon/news_orange_icon.png') no-repeat
          center;
      }
      .span-test {
        background: url('../../../assets/icon/news_green_icon.png') no-repeat
          center;
      }
      .span-strategy {
        background: url('../../../assets/icon/news_blue_icon.png') no-repeat
          center;
      }
      .span-newGame {
        background: url('../../../assets/icon/news_red_icon.png') no-repeat
          center;
      }
      .h5-news {
        color: #ffa93a;
      }
      .h5-test {
        color: #88d42f;
      }
      .h5-strategy {
        color: #2cd0ff;
      }
      .h5-newGame {
        color: #ff7770;
      }
      h1 {
        line-height: 40px;
        font-weight: 500;
      }
      i {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-size: 100% 100%;
        border-radius: 15px;
        overflow: hidden;
        vertical-align: middle;
        margin: 20px 0;
      }
      p {
        display: inline-block;
        width: 200px;
        padding: 0 17px;
        line-height: 22px;
        font-size: 12px;
        vertical-align: middle;
      }
      .item-content {
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
      }
    }
  }
  .news-right-content {
    height: 100%;
    .gift-title {
      color: #ffa93a;
      position: relative;
      line-height: 50px;
      margin-top: 5px;
      border-bottom: 1px solid #eee;
      margin: 0 25px;
      & > i {
        font-size: 20px;
        vertical-align: middle;
        margin-right: 8px;
      }
      a {
        position: absolute;
        right: 0;
        top: 0;
        color: #ccc;
        font-size: 16px;
        line-height: 50px;
        &:hover {
          color: #ffa93a;
          text-decoration: underline;
        }
      }
    }
    .gift-content {
      height: ~'calc(100% - 60px)';
      .gift-wrap {
        height: auto;
        width: auto;
        padding: 0 25px;
        span {
          color: #ffa93a;
        }
        h4 {
          line-height: 56px;
          border-bottom: 1px dashed #eee;
          cursor: pointer; // &:hover {
          //   text-decoration: underline;
          // }
        }
        &:last-child {
          h4 {
            border-bottom: 0;
          }
        }
      }
      .gift-item {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        padding-bottom: 15px;
        .item-left {
          flex: 0.3;
          -ms-flex: 0.3;
          -webkit-box-flex: 0.3;
          background-size: 100%;
          margin-right: 15px;
        }
        .item-right {
          flex: 0.7;
          -ms-flex: 0.7;
          -webkit-box-flex: 0.7;
          font-size: 14px;
          span {
            display: block;
            color: #ffa93a;
          }
          p {
            line-height: 34px;
            color: #c4c4c4;
          }
          h5 {
            line-height: 40px;
            text-align: center;
            background-color: #ffa93a;
            color: #fff;
            cursor: pointer;
          }
        }
      }
      .gift-activate {
        border: 1px solid #ffa93a;
        h4 {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>


